<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,user-scalable=no">
    <link rel="shortcut icon" type="image/x-icon" href="https://p3-passport.byteimg.com/img/user-avatar/adbaecdee112a67f134a8d5f9ab90b0c~100x100.awebp" />
    <title>周末干什么呢</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 2000px;
            background: linear-gradient(to right,rgba(172,226,252,.5),rgba(253,174,219,.5),rgba(248,241,177,.5),rgba(172,226,252,.5));
            background-size: 400%;
            animation: streamer 24s linear infinite;
        }
        header {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: fixed;
            left: 20px;
            top: 30px;
        }
        input {
            margin-top: 10px;
            padding: 8px;
            border: none;
            border-radius: 6px;
            color: #ccc;
        }
        input[type=text]:focus{ 
            outline: 1px solid #5582f3;
            color: #333;
        }
        p {
            background-color: #666;
            color: #fff;
            width: 100px;
            height: 30px;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            cursor: not-allowed;
            user-select: none;
            margin-top: 10px;
            position: relative;
        }
        div {
            background-color: #5582f3;
            color: #fff;
            width: 200px;
            height: 60px;
            font-size: 36px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: fixed;
            left: calc(50% - 100px);
            bottom: 60px;
            border-radius: 12px;
            cursor: pointer;
            user-select: none;
        }
        ul,li {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul {
            transform-style: preserve-3d;
            position: relative;
            width: 200px;
            height: 200px;
            transform: rotateX(45deg) rotateY(180deg) rotateZ(-45deg);
            transition: all 0.5s ease-out;
        }
        li {
            border-radius: 5px;
            border: solid 3px #333;
            width: 100%;
            height:  100%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #333;
            font-size: 48px;
            background-color: white;
            position: absolute;
            box-sizing: border-box;
        }
        ul li:nth-child(1) {
            transform: rotateY(180deg) rotateZ(270deg) translateZ(100px);
        }
        ul li:nth-child(2) {
            transform: rotateX(90deg) rotateY(180deg) rotateZ(180deg) translateZ(100px);
        }
        ul li:nth-child(3) {
            transform: rotateY(270deg) translateZ(100px);
        }
        ul li:nth-child(4) {
            transform: rotateX(90deg) translateZ(100px);
        }
        ul li:nth-child(5) {
            transform: rotateY(90deg) rotateZ(0deg) translateZ(100px);
        }
        ul li:nth-child(6) {
            transform: translateZ(100px);
        }
        .ani {
            animation: ani 0.5s linear infinite;
        }
        @keyframes ani {
            to {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(90deg);
            }
        }
        @keyframes streamer{
            to {
                background-position: -400% 0;
            }
        }
    </style>
</head>
<body>
    <header>
        <h1>自定义录入</h1>
        <input type="text" value="吃">
        <input type="text" value="喝">
        <input type="text" value="玩">
        <input type="text" value="乐">
        <input type="text" value="赌">
        <input type="text" value="睡">
        <p>确 定</p>
    </header>
    <ul>
        <li>吃</li>
        <li>喝</li>
        <li>玩</li>
        <li>乐</li>
        <li>赌</li>
        <li>睡</li>
    </ul>
    <div>开 始</div>
    <script>
        let valueList = ["吃","喝","玩","乐","赌","睡"],
            possibility = [
            {x: 45, y: 180, z: -45},
            {x: 135, y: -45, z: 0},
            {x: 135, y: 45, z: -90},
            {x: -45, y: 45, z: 0},
            {x: -45, y: -45, z: -90},
            {x: 45, y: 0, z: -45}
        ],isDown = false,index = 0,result,values,pDisable = true,
            randomList = [0,1,2,3,4,5],
            ul = document.querySelector('ul'),
            li = document.querySelectorAll('li'),
            div = document.querySelector('div'),
            input = document.querySelectorAll('input'),
            p = document.querySelector('p');
        input.forEach(i=>{
            i.oninput = ()=>{
                values = [];
                for(let inp of input){
                    values.push(inp.value)
                }
                if(values.join('') === valueList.join('')){
                    pDisable = true;
                    p.style.backgroundColor = '#666';
                    p.style.cursor = 'not-allowed';
                } else {
                    pDisable = false;
                    p.style.backgroundColor = '#5582f3';
                    p.style.cursor = 'pointer';
                }
            }
        })
        p.onmousedown = ()=>{
            if(pDisable) return
            p.style.bottom = '-5px';
        }
        p.onmouseup = ()=>{
            if(pDisable) return
            p.style.bottom = '0';
            valueList = [...values];
            li.forEach((l,i)=>{
                l.innerHTML = valueList[i];
            })
            pDisable = true;
            p.style.backgroundColor = '#666';
            p.style.cursor = 'not-allowed';
        }
        div.onmousedown = ()=>{
            if(isDown) return
            div.style.bottom = '55px';
        }
        
        div.onmouseup = ()=>{
            if(isDown) return
            li.forEach(l=>{
                l.style.color = '#333';
            })
            index = randomList.filter(r=>r!=index)[Math.floor(Math.random() * 5)]
            result = possibility[index];
            div.style.bottom = '60px';
            div.style.backgroundColor = '#666';
            div.style.cursor = 'not-allowed';
            ul.className = 'ani';
            isDown = true;
            setTimeout(()=>{
                ul.className = '';
                ul.style.transform = 'rotateX(360deg) rotateY(360deg) rotateZ(90deg)';
                setTimeout(()=>{
                    ul.style.transform = `rotateX(${result.x}deg) rotateY(${result.y}deg) rotateZ(${result.z}deg`;
                    setTimeout(()=>{
                        li[index].style.color = 'red';
                        isDown = false;
                        div.style.backgroundColor = '#5582f3';
                        div.style.cursor = 'pointer';
                    },500)
                },100)
            },1000)
        }
    </script>
</body>
</html>
